<template>
  <div id="app">
    <router-view />
    <theme-picker />
  </div>
</template>

<script>
import ThemePicker from "@/components/ThemePicker";

export default {
  name: "App",
  components: { ThemePicker },
    metaInfo() {
        return {
            title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
            titleTemplate: title => {
                return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
            }
        }
    },
  mounted(){
    //添加监听事件
    window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
    window.addEventListener('unload', e => this.unloadFn(e))
  },
  data:{
    return:{
      beginTime : 0, //开始时间
      differTime : 0 //时间差
    }
  },
  methods: {
    beforeunloadFn(e) {
      console.log(e)
      console.log('刷新或关闭')
      console.log(e)
      this.beginTime = new Date().getTime();
      // ...

    },
    unloadFn(e) {
      this.differTime = new Date().getTime() - this.beginTime;
      if(this.differTime<5){
        this.$store.dispatch('LogOut')
      }
      // 原理是刷新页面与关闭页面时两个事件的事件间隔不一样，关闭页面通常小于10ms

    }
  },
  created() {
    window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
    window.addEventListener('unload', e => this.unloadFn(e))
  },
  destroyed() {
    window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
    window.removeEventListener('unload', e => this.unloadFn(e))
  }
};
</script>
<style scoped>
#app .theme-picker {
  display: none;
}
</style>
